"use client";
import { useEffect, useState } from "react";
import Image from "next/image";
import { convertTimeZone } from "@/utils/operateTime";
import type { CommentInfo } from "@/type";

type Props = {
  commentInfo: CommentInfo;
  clickReplied: (parentId: number | null, commentNickname: string) => void;
};

export default function DisplayComment({ commentInfo, clickReplied }: Props) {
  const [isHovering, setIsHovering] = useState(false);
  function displayReplied(status: boolean) {
    setIsHovering(status);
  }

  function clickRepied(commentInfo: CommentInfo) {
    const prentId = commentInfo.parent_id || commentInfo.comment_id;
    clickReplied(prentId, commentInfo.comment_nickname);
  }

  useEffect(() => {
    if (
      /Mobi|Android|iPhone|iPad|iPod|Windows Phone/i.test(navigator.userAgent)
    )
      setIsHovering(true);
  }, []);

  return (
    <div key={commentInfo.comment_id} className="mb-2">
      <div className="flex items-center mb-2">
        <Image
          className="mr-3"
          src="/favicon.ico"
          width={30}
          height={30}
          alt="ReindeerのRoom default avatar"
        />
        <span className="mr-3">{commentInfo.comment_nickname}</span>
        <span>{convertTimeZone(commentInfo.create_time)}</span>
      </div>
      <div
        className="p-2 md:p-4 bg-primary-foreground rounded-xl"
        onMouseEnter={() => displayReplied(true)}
        onMouseLeave={() => displayReplied(false)}
      >
        {commentInfo.parent_id === null ? (
          <span>{commentInfo.comment}</span>
        ) : (
          <span>{`@${commentInfo.replied_nickname} ${commentInfo.comment}`}</span>
        )}
        {isHovering && (
          <span
            className="ml-3 cursor-pointer"
            onClick={() => clickRepied(commentInfo)}
          >
            💬
          </span>
        )}
      </div>
      <div className="mt-2 pl-3 text-stone-400">火星奥林波斯山</div>
    </div>
  );
}
